<!doctype html>
<html lang="zh-CN">

<head>
    <title>主页</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/jquery.mytooltip.css">
    <link rel="stylesheet" href="./css/hea-com.css">
    <link rel="stylesheet" href="./css/bind-alipay.css">
    <link rel="stylesheet" href="./css/bind-bank1.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id='app' v-cloak>

        <!-- 设置交易密码框  第一次进来没设置交易密码弹出-->
        <div id='mask' v-if='offSetPas'></div>
        <transition enter-active-class='animated bounceInDown' leave-active-class='animated fadeOutUp'>
            <div id='mask-1' v-if='offSetPas'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>设置交易密码</span>
                        <img src="./img/close.svg" style="width:22px;height:22px;opacity: 0;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="请输入6位数字作为交易密码">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="确认交易密码">
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 设置交易密码框 -->

        <!-- 我要复投弹窗 -->
        <div id='mask' v-if='offFutou'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='offFutou'>
                <div class='mask-con'>
                    <h1 class='futou-tit'>我要复投</h1>
                    <div class='futou-cent'>
                        <p>
                            <span>玩法：</span>
                            <span>五星-直选复式</span>
                        </p>
                        <p>
                            <span>号码：</span>
                            <span>13245212313241534121523414511111</span>
                        </p>
                        <p>
                            <span>模式：</span>
                            <span>元模式</span>
                            <span>，奖金：</span>
                            <span>154542</span>
                            <span>，返点：</span>
                            <span>0%</span>
                        </p>
                        <p>
                            共 <span style="color:#2590fe;">1000</span>注，<span style='color:#2590fe;'>3</span>倍，共计<span style='color:#2590fe;'>5200</span>元
                        </p>
                        <div class='futou-count'>
                            复投期数
                            <p class='dis-cen'>
                                <span class='hover'>-</span>
                                <span>3</span>
                                <span class='hover'>+</span>
                            </p>
                            共<span>18000</span>元
                        </div>
                        <p class='futou-noti'>账户余额不足</p>
                        <div class='dis-spa futou-controll'>
                            <button class='hover' @click='offFutou=false;'>取消</button>
                            <button class='hover'>确认复投</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 我要复投弹窗 -->

        <!-- 绑定支付宝账号 -->
        <bind-alipy :open='bindAB=="1"?true:false' @close_alipy='bindAB=false'></bind-alipy>
        <!-- 绑定支付宝账号 -->

        <!-- 绑定银行卡 -->
        <bind-bank1 :open='bindAB=="2"?true:false' @close_bank='bindAB=false'></bind-bank1>
        <!-- 绑定银行卡-->

        <hea-component @bind_alipy="bindAB='1'" @bind_bank="bindAB='2'"></hea-component>

        <div class='jackpot-wrap'>
            <div class='dis-spa margin-center'>
                <div class='dis-spa jack-left'>
                    <img src="./img/shishicai.png">
                    <div class='other-time-tit'>
                        <p>
                            <span>重庆时时彩</span>
                            <span>20181219-99期</span>
                        </p>
                        <p>
                            <span>
                                剩余投注时间：
                            </span>
                            <img src="./img/0.png">
                            <img src="./img/0.png">
                            <img src="./img/maohao.png">
                            <img src="./img/0.png">
                            <img src="./img/1.png">
                            <img src="./img/maohao.png">
                            <img src="./img/3.png">
                            <img src="./img/7.png">
                        </p>
                    </div>
                </div>
                <div class='jack-right'>
                    <div class="dis-spa">
                        <p>20181219-98期&nbsp;开奖号码 </p>&nbsp;&nbsp;&nbsp;
                        <img src="./img/zousi.svg" style="height:15px;width:15px;">
                        <span style="font-size:12px;color:#999999;">号码走势</span>
                    </div>
                    <div class='dis-spa jack-yes-num'>
                        <img src="./img/-0.png">
                        <img src="./img/-4.png">
                        <img src="./img/-9.png">
                        <img src="./img/-7.png">
                        <img src="./img/-2.png">
                    </div>
                </div>
            </div>
        </div>

        <div class='dis-spa game-meth-tit'>
            <div class='dis-spa game-tit-left'>
                <span @click='changePlay("wuxin",$event)' class='game-meth-active'>五星</span>
                <span>四星</span>
                <span>后三</span>
                <span>中三</span>
                <span>前三</span>
                <span>后二</span>
                <span>前二</span>
                <span>定位胆</span>
                <span>不定位</span>
                <span @click='changePlay("daxiao",$event)'>大小单双</span>
                <span>任选玩法</span>
            </div>
            <div class='game-tit-right'>
                <p @click='toggLo($event)' togg='1' class='hover'>历史开奖</p>
                <div class='play-meth-right' id='lottery' style="display:none;">
                    <p class='game-jack-num-tit'>
                        <span>期数</span>
                        <span>开奖号码</span>
                    </p>
                    <p>
                        <span>124351214531</span>
                        <span>48751</span>
                    </p>
                    <p>
                        <span>124351214531</span>
                        <span>48751</span>
                    </p>
                    <p>
                        <span>124351214531</span>
                        <span>48751</span>
                    </p>
                    <p>
                        <span>124351214531</span>
                        <span>48751</span>
                    </p>
                    <p>
                        <span>124351214531</span>
                        <span>48751</span>
                    </p>
                </div>
            </div>
        </div>

        <div class='dis-spa margin-center' style="align-items:flex-start;" v-if="play=='wuxin'">
            <div class='play-meth-left'>
                <p>
                    <span>五星直选：</span>
                    <span @click='changeMeth("wuxinFu",$event)' class='play-meth-active'>直选复式</span>
                    <span @click='changeMeth("wuxinDan",$event)'>直选单式</span>
                    <span>五星组合</span>
                </p>
                <p>
                    <span>五星组选：</span>
                    <span>组选120</span>
                    <span>组选60</span>
                    <span>组选30</span>
                    <span>组选20</span>
                    <span>组选10</span>
                    <span>组选5</span>
                </p>
                <p>
                    <span>五星特殊：</span>
                    <span>一帆风顺</span>
                    <span>好事成双</span>
                    <span>三星报喜</span>
                    <span>四季发财</span>
                </p>
                <p>
                    <span>五星其他：</span>
                    <span>龙和虎</span>
                    <span>总和大小单双</span>
                </p>
                <div class='dis-spa'>
                    <span>从万位、千位、百位、十位、个位各选一个号码组成一注。所选号码与开奖号码相同，且顺序一致，即为中奖。</span>
                    <a class='tooltip hover' data-mytooltip-custom-class="tooltip-f7" data-mytooltip-custom-class="align-center" data-mytooltip-offset='20' :data-mytooltip-template="likeExa()">查看范例</a>
                </div>
            </div>
        </div>

        <div class='margin-center play-info-num' v-if='meth=="wuxinFu"'>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>万位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span class='rule-num-active'>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>千位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span class='rule-num-active'>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>百位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span class='rule-num-active'>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>十位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span class='rule-num-active'>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>个位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span class='rule-num-active'>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span class='rule-num-active'>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
        </div>

        <div class='margin-center dis-spa simplay-play-wrap' v-if='meth=="wuxinDan"'>
            <div class='simplay-left-wrap'>
                <textarea></textarea>
                <p>每一个号码之间请用一个空格【】、逗号【,】或者【;】隔开</p>
            </div>
            <div class='simplay-right-wrap'>
                <button>删除重复号</button>
                <button class='sim-righ-active'>导入文件</button>
                <button>清空</button>
            </div>
        </div>

        <div class='dis-spa margin-center' style="align-items:flex-start;" v-if="play=='daxiao'">
            <div class='play-meth-left'>
                <p>
                    <span>五星直选：</span>
                    <span class='play-meth-active'>前二大小单双</span>
                    <span>后二大小单双</span>
                    <span>前三大小单双</span>
                    <span>后三大小单双</span>
                </p>
                <div class='dis-spa'>
                    <span>从万位、千位、百位、十位、个位各选一个号码组成一注。所选号码与开奖号码相同，且顺序一致，即为中奖。</span>
                    <a class='tooltip hover' data-mytooltip-custom-class="tooltip-f7" data-mytooltip-custom-class="align-center" data-mytooltip-offset='20' :data-mytooltip-template="likeExa()">查看范例</a>
                </div>
            </div>
        </div>

        <div class='margin-center play-info-num' v-if='meth=="daxiaoqianer"'>
            <div class='dis-spa play-rule-info daxiao-qianer'>
                <p class='rule-num'>
                    <i>
                        <span>万位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>大</span>
                    <span>小</span>
                    <span class='rule-num-active'>单</span>
                    <span>双</span>
                </p>
                <p class='rule-font'>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info daxiao-qianer'>
                <p class='rule-num'>
                    <i>
                        <span>千位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>大</span>
                    <span>小</span>
                    <span class='rule-num-active'>单</span>
                    <span>双</span>
                </p>
                <p class='rule-font'>
                    <span>清</span>
                </p>
            </div>
        </div>

        <div class='margin-center dis-spa change-num-wrap'>
            <div class='change-num-left'>
                <span>
                    共<span style="color:#2590FE;padding:0 5px;">5</span>注，共<span style="color:#2590FE;padding:0 5px;">30</span>元
                </span>
                <div class='dis-spa'>
                    <span>倍数</span>
                    <p class='add-count'>
                        <span class='hover'>-</span>
                        <span style="color:#2590FE;">3</span>
                        <span class='hover'>+</span>
                    </p>
                </div>
                <div class='dis-spa'>
                    <span>模式</span>
                    <el-dropdown class='pattern' trigger='click'>
                        <span class="el-dropdown-link">
                            元<img src="./img/down.svg" style="width:15px;height:15px;">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class='dis-spa'>
                    <span>模式</span>
                    <el-dropdown class='pattern' trigger='click' placement='bottom-start'>
                        <span class="el-dropdown-link">
                            129856<img src="./img/down.svg" style="width:15px;height:15px;">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class='change-num-right'>
                <button class='hover'>确认选号</button>
                <button class='hover'>立即投注</button>
            </div>
        </div>

        <div class='margin-center investment-wrap' id='invest'>
            <div class='investment-left'>
                <div class='dis-spa inve-tit'>
                    <p>
                        <span class='inves-active hover'>投注列表</span>
                        <span class='hover'>复投列表</span>
                    </p>
                    <span class='hover'>清空列表</span>
                </div>
                <div id='invest-content'>
                    <div class='dis-spa' v-for='(val,index) in 10' :key='index'>
                        <p>
                            <span class='tooltip' data-mytooltip-custom-class="tooltip-f7" data-mytooltip-custom-class="align-center" data-mytooltip-offset='20' :data-mytooltip-template="toolDom()">[五星-直选复式]455，15，165，4，45[5注][3倍][元模式][30元]</span>
                            <span class='hover' @click='offFutou=true;'>我要复投</span>
                        </p>
                        <img class='hover' src="./img/close-x.svg" style="width:10px;height:10px;">
                    </div>
                </div>
            </div>
            <div class='investment-right' id='invest-right'>
                <p>预投未来期</p>
                <div>
                    <el-dropdown class='pattern' trigger='click' placement='bottom-start'>
                        <span class="el-dropdown-link">
                            129812654456<img src="./img/down.svg" style="width:15px;height:15px;">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div>
                    <button class='hover'>一件投注</button>
                </div>
                <div>
                    <span>总注数：</span>
                    <span style="color:#2590fe;">154152</span>
                    <span>注，总金额：</span>
                    <span style="color:#2590fe;">1345412</span>
                    <span>元</span>
                </div>
            </div>
        </div>

    </div>
    <script src="./js/vue.min.js"></script>
    <script src="./component/hea.js"></script>
    <script src="./component/bindAlipay.js"></script>
    <script src="./component/bindBank.js"></script>
    <script src="./js/el/index.js"></script>
    <script src='./js/jquery.min.js'></script>
    <script src="./js/jquery.mytooltip.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //控制忘记密码
                offSetPas: false,
                //控制复投弹窗
                offFutou: false,
                //控制玩法  wuxinFu:五星-直选复式  wuxinDan：五星-直选单式
                meth: 'wuxinFu',
                //改变游戏
                play: 'wuxin',
                //1：绑定支付宝  2：绑定银行卡
                bindAB: false
            },
            mounted: function() {
                this.setHei();
                //初始化tooltip
                $('.tooltip').myTooltip();
            },
            watch: {
                play: function() {
                    this.setHei();
                },
                meth: function() {
                    this.setHei();
                }
            },
            methods: {
                //动态设置投注列表的高度
                setHei: function() {
                    this.$nextTick(function() {
                        var winHei = $(window).height();
                        var top = $('#invest').offset().top;
                        var reHei = winHei - top - 45;
                        if (reHei < 200) {
                            reHei = 200;
                        }
                        $('#invest-content').height(reHei);
                        $('#invest-right').height(reHei + 34);
                    });
                },
                //改变下级玩法的控制
                changeMeth: function(play, ev) {
                    var el = $(ev.target);
                    $('.play-meth-active').removeClass('play-meth-active');
                    el.addClass('play-meth-active');
                    this.meth = play;
                    // This.setHei();
                    //初始化tooltip
                    this.$nextTick(function() {
                        $('.tooltip').myTooltip();
                    });
                },
                //改变上级几星玩法
                changePlay: function(play, ev) {
                    var el = $(ev.target);
                    var This = this;
                    $('.game-meth-active').removeClass('game-meth-active');
                    el.addClass('game-meth-active');
                    this.play = play;
                    switch (play) {
                        case 'wuxin':
                            This.meth = 'wuxinFu';
                            break;
                        case 'daxiao':
                            This.meth = 'daxiaoqianer';
                            break;
                    }
                    // This.setHei();
                    //初始化tooltip
                    this.$nextTick(function() {
                        $('.tooltip').myTooltip();
                    });
                },
                //开奖与否的伸缩控制
                toggLo: function(ev) {
                    var el = $(ev.target);
                    var togg = el.attr('togg');
                    if (togg == '1') {
                        el.attr('togg', '0');
                        $('#lottery').slideDown(200);
                    } else {
                        el.attr('togg', '1');
                        $('#lottery').slideUp(200);
                    }
                },
                //tooltip的数据生成
                toolDom: function() {
                    var dom = "<div class='tooltip-f7'><p><span>玩法：</span><span>五星-直选复式</span></p> <p><span>号码：</span><span>010154545313215341231123123</span></p> <p><span>模式：</span><span>元模式</span><span>，奖金</span><span>12315</span><span>，返点</span><span>0%</span></p> <p>共<span style='color:#2590fe;'>10000</span>注，<span style='color:#2590fe;'>3</span>倍，共计<span style='color:#2590fe;'>60000</span>元</p></div>";
                    return dom;
                },
                //查看范例tooltip数据
                likeExa: function() {
                    var dom = "<div class='tooltip-f7'><p><span>投注方案：</span><span>1254511</span></p><p><span>开奖号码：</span><span>1212312，即中5星直选</span></p></div>";
                    return dom;
                }
            }
        });
    </script>

</body>

</html>